<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .boxWrap {
            width: 56.4px;
            height: 14.1px;
            overflow: hidden;
        }
        
        .box {
            width: 200%;
            height: 100%;
            /* border: 1px dashed darkorchid; */
            box-sizing: border-box;
            background-image: repeating-linear-gradient(135deg, orange 0px, orange 10px, skyblue 10px, skyblue 20px, orange 20px);
            animation: move 3s linear infinite
        }
        
        @keyframes move {
            from {
                transform: translateX(-50%)
            }
            to {
                transform: translateX(0)
            }
        }
        /* RAINY */
        
        .rainy {
            animation: rainy 5s ease-in-out infinite 1s;
            background: #eeeeee;
            border-radius: 50%;
            box-shadow: #eeeeee 65px -15px 0 -5px, #CCCCCC 25px -25px, #CCCCCC 30px 10px, #CCCCCC 60px 15px 0 -10px, #CCCCCC 85px 5px 0 -5px;
            display: block;
            height: 50px;
            width: 50px;
            margin-left: -60px;
            position: absolute;
            left: 427px;
            top: 70px;
        }
        
        .rainy:after {
            animation: rainy_shadow 5s ease-in-out infinite 1s;
            background: #000000;
            border-radius: 50%;
            content: '';
            height: 15px;
            width: 120px;
            opacity: 0.8;
            position: absolute;
            left: 5px;
            bottom: -60px;
            transform: scale(1);
        }
        
        .rainy:before {
            animation: rainy_rain .7s infinite linear;
            content: '';
            background: red;
            border-radius: 50%;
            display: block;
            height: 6px;
            width: 3px;
            opacity: 0.3;
            transform: scale(.9);
        }
        
        @keyframes rainy {
            50% {
                transform: translateY(-20px);
            }
        }
        
        @keyframes rainy_shadow {
            50% {
                transform: translateY(20px) scale(.7);
                opacity: 0.05;
            }
        }
        
        @keyframes rainy_rain {
            0% {
                box-shadow: rgba(0, 0, 0, 0) 30px 30px, rgba(0, 0, 0, 0) 40px 40px, #000 50px 75px, #000 55px 50px, #000 70px 100px, #000 80px 95px, #000 110px 45px, #000 90px 35px;
            }
            25% {
                box-shadow: #000 30px 45px, #000 40px 60px, #000 50px 90px, #000 55px 65px, rgba(0, 0, 0, 0) 70px 120px, rgba(0, 0, 0, 0) 80px 120px, #000 110px 70px, #000 90px 60px;
            }
            26% {
                box-shadow: #000 30px 45px, #000 40px 60px, #000 50px 90px, #000 55px 65px, rgba(0, 0, 0, 0) 70px 40px, rgba(0, 0, 0, 0) 80px 20px, #000 110px 70px, #000 90px 60px;
            }
            50% {
                box-shadow: #000 30px 70px, #000 40px 80px, rgba(0, 0, 0, 0) 50px 100px, #000 55px 80px, #000 70px 60px, #000 80px 45px, #000 110px 95px, #000 90px 85px;
            }
            51% {
                box-shadow: #000 30px 70px, #000 40px 80px, rgba(0, 0, 0, 0) 50px 45px, #000 55px 80px, #000 70px 60px, #000 80px 45px, #000 110px 95px, #000 90px 85px;
            }
            75% {
                box-shadow: #000 30px 95px, #000 40px 100px, #000 50px 60px, rgba(0, 0, 0, 0) 55px 95px, #000 70px 80px, #000 80px 70px, rgba(0, 0, 0, 0) 110px 120px, rgba(0, 0, 0, 0) 90px 110px;
            }
            76% {
                box-shadow: #000 30px 95px, #000 40px 100px, #000 50px 60px, rgba(0, 0, 0, 0) 55px 35px, #000 70px 80px, #000 80px 70px, rgba(0, 0, 0, 0) 110px 25px, rgba(0, 0, 0, 0) 90px 15px;
            }
            100% {
                box-shadow: rgba(0, 0, 0, 0) 30px 120px, rgba(0, 0, 0, 0) 40px 120px, #000 50px 75px, #000 55px 50px, #000 70px 100px, #000 80px 95px, #000 110px 45px, #000 90px 35px;
            }
        }
    </style>
</head>

<body>
    <div class="boxWrap">
        <div class="box"></div>
    </div>
    <div class="rainy"></div>
</body>

<!-- 

   // background rgba(10, 25, 40, 1)
  // background rgba(0, 0, 0, 1)
  // background rgba(10, 120, 130, 1)
  // background-image radial-gradient($repeatColor 0, transparent 1px, transparent)
  // background-image linear-gradient(45deg, $repeatColor 25%, transparent 25%, transparent), linear-gradient(-45deg, $repeatColor 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, $repeatColor 75%), linear-gradient(-45deg, transparent 75%, $repeatColor 75%)
  // background-size 5px 5px

  // $repeatColor = rgba(10, 120, 230, 1)
$repeatColor = rgba(255, 255, 255, 0.8)

 -->

</html>